<template>
  <div>
    <h3>柱状图和饼图4</h3>
    <div class="box" ref="box"></div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: {},
      num: 1,
      chartsDataList: [],
      timer: null,
      index: 0,
    };
  },
  mounted() {
    let me = this;
    setTimeout(() => {
      me.init();
      this.$bus.on("resize", (val) => {
        this.myChart.resize();
      });
    }, 120);
  },
  methods: {
    getTimeVal(val) {
      let time = "";
      let me = this;
      let hour = me.$moment.utc(val).hour();
      let minute = me.$moment.utc(val).minute();
      let second = me.$moment.utc(val).second();
      let millisecond = me.$moment.utc(val).millisecond();

      hour ? (time += hour + "小时") : "";
      minute ? (time += minute + "分") : "";
      if (second && millisecond) {
        time += second + "." + millisecond + "秒";
      } else if (second && !millisecond) {
        second ? (time += second + "秒") : "";
      } else if (!second && millisecond) {
        time += "0." + millisecond + "秒";
      } else {
        time = val;
      }

      return time;
    },
    init() {
      let me = this;
      let box = this.$refs.box;
      let myChart = this.$echarts.init(box);
      var scale = 1;
      var rich = {
        title: {
          color: "#eee",
          align: "center",
        },
        abg: {
          backgroundColor: "#333",
          width: "100%",
          align: "right",
          height: 25,
          borderRadius: [4, 4, 0, 0],
        },
        weatherHead: {
          width: 40,
          color: "#333",
          height: 24,
          align: "left",
        },
        hr: {
          borderColor: "#777",
          width: "100%",
          borderWidth: 0.5,
          height: 0,
        },
        value: {
          width: 50,
          height: 32,
          color: "#ffc72b",
          padding: [0, 20, 0, 30],
          align: "center",
          fontSize: 18,
        },
        red: {
          width: 50,
          height: 32,
          color: "red",
          padding: [0, 20, 0, 30],
          align: "center",
          fontSize: 20,
        },
        valueHead: {
          color: "#333",
          width: 50,
          height: 24,
          padding: [0, 20, 0, 30],
          align: "center",
        },
        rate: {
          width: 50,
          height: 32,
          fontSize: 18,
          color: "#49dff0",
          align: "right",
          padding: [0, 20, 0, 30],
        },
        rateHead: {
          color: "#333",
          width: 50,
          height: 24,
          align: "center",
          padding: [0, 20, 0, 30],
        },
      };
      let option = {
        color: ["#2D79E9", "#797B7F", "#67C23A", "#7FAE90"],
        tooltip: [
          {
            trigger: "axis",
            showContent: true,
            axisPointer: {
              type: "shadow",
            },
            textStyle: { width: 400 },

            formatter: function (params) {
              if (params && params.length > 0) {
                let str = "任务名称XXXXXX" + "</br>";
                for (var i = 0; i < params.length; i++) {
                  let tar = params[i];
                  let name = tar.seriesName;
                  let marker = tar.marker;
                  let value = tar.value;
                  str +=
                    "<div style='display:flex;justify-content:space-between'><span>" +
                    marker +
                    name +
                    " : </span>" +
                    "<span>" +
                    value +
                    "毫秒</span>" +
                    "</div>";
                }
                return str;
              }
            },
          },
        ],
        title: {
          text: "任务名称XXXX",
          textStyle: { fontSize: 22 },
          subtext: "总耗时：07:53.544",
          subtextStyle: { fontSize: 16, color: "#999999" },
          x: "center",
        },
        legend: {
          show: true,
          top: 60,
        },
        grid: [
          {
            top: 85,
            width: "90%",
            height: 140,
            // bottom: "75%",
            left: 60,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            boundaryGap: [0, 0.01],
            name: "单位：毫秒",
            show: false,
          },
        ],
        yAxis: [
          {
            type: "category",
            data: ["任务耗时"],
          },
        ],
        selectedMode: "single",
        series: [
          {
            name: "任务总耗时",
            type: "bar",
            stack: "Total",
            barGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            emphasis: {
              focus: "series",
            },
            color: "#73C0DE",
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);

                // return value + "毫秒";
                return time;
              },
              position: "right",
              show: true,
            },
            data: [100 + 23489 + 29034 + 4970],
          },
          {
            name: "任务启动时间",
            type: "bar",
            stack: "class",
            emphasis: {
              focus: "series",
            },
            data: [100],
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);
                // return value + "毫秒";
                return time;
              },
              position: "bottom",
              show: true,
            },
          },
          {
            name: "步骤等待时间",
            type: "bar",
            stack: "class",
            emphasis: {
              focus: "series",
            },
            data: [23489],
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);
                // return value + "毫秒";
                return time;
              },
              position: "bottom",
              show: true,
            },
          },
          {
            name: "步骤运行时间",
            type: "bar",
            stack: "class",
            emphasis: {
              focus: "series",
            },
            data: [29034],
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);
                // return value + "毫秒";
                return time;
              },
              position: "bottom",
              show: true,
            },
          },
          {
            name: "任务结束时间",
            type: "bar",
            stack: "class",
            emphasis: {
              focus: "series",
            },
            data: [4970],
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);
                // return value + "毫秒";
                return time;
              },
              position: "bottom",
              show: true,
            },
          },
          {
            type: "pie",
            radius: [0, "40%"],
            center: ["45%", "75%"],
            data: [
              { value: 100, name: "任务启动时间" },
              { value: 23489, name: "步骤等待时间" },
              { value: 29034, name: "步骤运行时间", selected: true },
              { value: 4970, name: "任务结束时间" },
            ],
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let valStr = "value";
                if (value >= 29034) {
                  valStr = "red";
                }
                let time = me.getTimeVal(value);
                // return value + "毫秒";

                let str = [
                  "{title|" + params.name + "}{abg|}",
                  "  {valueHead|耗时}{rateHead|占比}",
                  "{hr|}",
                  "  {" +
                    valStr +
                    "|" +
                    time +
                    "}{rate|" +
                    params.percent +
                    "%}",
                ].join("\n");
                // let str =
                //   "{title|" +
                //   params.name +
                //   "} \n {" +
                //   valStr +
                //   "|" +
                //   params.value +
                //   "} 毫秒  \n {blue|" +
                //   params.percent +
                //   "%}";
                return str;
              },
              rich: rich,
              alignTo: "edge",
              minMargin: 25,
              edgeDistance: 0,
              // lineHeight: 18,
              backgroundColor: "#eee",
              borderColor: "#777",
              borderWidth: 1,
              borderRadius: 4,
              color: "#333",
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 30,
            },
          },
        ],
      };
      myChart.setOption(option, true);
      this.myChart = myChart;
      this.myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 2,
        dataIndex: 1,
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 500px;
}
.topBtn {
  display: flex;
  justify-content: center;
}
.bl {
  display: flex;
  justify-content: space-between;
}
</style>
